<!DOCTYPE html>
<html class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title>欢迎页面-X-admin2.2</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet" href="../../css/font.css">
<link rel="stylesheet" href="../../css/xadmin.css">
<script src="../../lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="../../js/xadmin.js"></script>
<!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>
<body>
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">

			<div class="layui-col-sm12 layui-col-md6">
				<div class="layui-card">
					<div class="layui-card-header">七天订单数统计</div>
					<div class="layui-card-body" style="min-height: 280px;">
						<div id="main1" class="layui-col-sm12" style="height: 300px;"></div>

					</div>
				</div>
			</div>
			<div class="layui-col-sm12 layui-col-md6">
				<div class="layui-card">
					<div class="layui-card-header">七天收入量统计</div>
					<div class="layui-card-body" style="min-height: 280px;">
						<div id="main2" class="layui-col-sm12" style="height: 300px;"></div>

					</div>
				</div>
			</div>
			<div class="layui-col-sm12 layui-col-md6">
				<div class="layui-card">
					<div class="layui-card-header">用户数量统计</div>
					<div class="layui-card-body" style="min-height: 280px;">
						<div id="main3" class="layui-col-sm12" style="height: 300px;"></div>

					</div>
				</div>
			</div>
			<div class="layui-col-sm12 layui-col-md6">
				<div class="layui-card">
					<div class="layui-card-header">服务器内存使用率</div>
					<div class="layui-card-body" style="min-height: 280px;">
						<div id="main4" class="layui-col-sm12" style="height: 300px;"></div>

					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例

		//请求数据 填充
		$.post("countLastWeekOrderNum", function(res) {

			var myChart = echarts.init(document.getElementById('main1'));

			var x = [];
			var y = [];

			res.data.forEach(function(item) {
				x.push(item.dateTime);
				y.push(item.num);
			})
			// 指定图表的配置项和数据
			var option = {
				grid : {
					top : '5%',
					right : '1%',
					left : '1%',
					bottom : '10%',
					containLabel : true
				},
				tooltip : {
					trigger : 'axis'
				},
				xAxis : {
					type : 'category',
					data : x
				},
				yAxis : {
					type : 'value'
				},
				series : [ {
					name : '订单数量',
					data : y,
					type : 'line',
					smooth : true
				} ]
			};

			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		})

		$.post("countLastWeekOrderAmount", function(res) {

			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main2'));

			var x = [];
			var y = [];

			res.data.forEach(function(item) {
				x.push(item.dateTime);
				y.push(item.amount);
			})

			// 指定图表的配置项和数据
			var option = {
				tooltip : {
					trigger : 'axis',
					axisPointer : {
						type : 'cross',
						label : {
							backgroundColor : '#6a7985'
						}
					}
				},
				grid : {
					top : '5%',
					right : '2%',
					left : '1%',
					bottom : '10%',
					containLabel : true
				},
				xAxis : [ {
					type : 'category',
					boundaryGap : false,
					data : x
				} ],
				yAxis : [ {
					type : 'value'
				} ],
				series : {
					name : '收入',
					type : 'line',
					areaStyle : {
						normal : {}
					},
					data : y,
					smooth : true,

				}
			};
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);

		});

		$.post("countBusinessUser", function(res) {

			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main3'));

			// 指定图表的配置项和数据
			var option = {
				tooltip : {
					trigger : 'item',
					formatter : "{a} <br/>{b} : {c} ({d}%)"
				},
				legend : {
					orient : 'vertical',
					left : 'left',
					data : [ '微信访问' ]
				},
				series : [ {
					name : '访问来源',
					type : 'pie',
					radius : '55%',
					center : [ '50%', '60%' ],
					data : [ {
						value : res.data,
						name : '微信访问'
					} ],
					itemStyle : {
						emphasis : {
							shadowBlur : 10,
							shadowOffsetX : 0,
							shadowColor : 'rgba(0, 0, 0, 0.5)'
						}
					}
				} ]
			};

			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		});

		$.post("getMemoryUsed", function(res) {

			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main4'));
			// 指定图表的配置项和数据
			var option = {
				tooltip : {
					formatter : "{a} <br/>{b} : {c}%"
				},
				series : [ {
					name : '服务器内存使用率',
					type : 'gauge',
					detail : {
						formatter : '{value}%'
					},
					data : [ {
						value : res.data,
						name : '已使用'
					} ]
				} ]
			};
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);

		});
	</script>
</body>
</html>